/* Copyright [2014] UW-Parkside
 * Authors: Jasmine Griffiths, Matthew Zygowicz, Armando Narvaez
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
*/

/* auxillary.js
 * auxillary controls the overall look and feel of the KAT Manager website.
 * When loaded, each page will call the functions to enable:
 *  Table filtering (filterTable())
 *  Zebra Colored Rows (zebraRows())
 *  Floating edit box (stickDiv())
 *  Minimizing browser compatibility (adjustStyle())  
 *  More about these functions can be seen above each declaration.
 */

$(document).ready(function() {
    {
        // Enable filterable tables; Tables can be filtered based on case
        // insenstive user input inside of an input form field.
        filterTable()
        // Color alternating rows in any table. Rows with class name 'odd'
        // will be colored differently.
        zebraRows('tbody tr:odd td', 'odd');
        // Stick the edit box to the top of the window when the user
        // scrolls down.
        stickyDiv();

        // Change the CSS if the window is resized below 1250px
        $(function() {
            adjustStyle($(this).width());
            $(window).resize(function() {
                adjustStyle($(this).width());
            });
        });
    };
})(jQuery);

// Used to apply alternating row styles
function zebraRows(selector, className) {
    $(selector).removeClass(className).addClass(className);
}

// Sticky window with row update/delete information
function stickyDiv() {
    var s = $("#sticker"); // the div to stick will have the ID sticker
    var pos = s.position(); // grab the current position of the div
    // If the user scrolls down past the position of the div, then
    // make the div stick to the top of the page.
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
}

// Sticky side content window for the middle of the page
// This function is similar to stickyDiv(), however it takes in the
// browser width and only makes the div sticky if the browser is less
// than the width used as an argument.
function stickyMiddleDiv(width) {
    var s = $("#reducedResolution");
    var pos = s.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (width < 1250) {
            if (windowpos >= pos.top) {
                s.addClass("stick");
            } else {
                s.removeClass("stick");
            }
        }
    });
}

// This will switch out the CSS sheet which styles windows less than 1250px wide
// it will also change the layout to the "no side content" layout and center
// the middle container.
// The side content will be placed in the center, and will follow the user 
// as he/she scrolls down the page.
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 1250) {
        $('#size-stylesheet').attr('href', '/resources/css/665.css');  // min-width 665px
        $('div#container').attr('id', 'containerMin'); // switch container to the container w/o side content
        $('div#mainContent').attr('id', 'mainContentNoSidebar'); // no side content main
        $('div#sideContent').addClass('hidden'); // hide the side content
        stickyMiddleDiv(width); // Make the middle edit box sticky
        $('div#editSideContent').addClass('hidden'); // This is the edit box from the 'add route' screen.
        // div#editSideContent displays which route is being edited.
        
    } else if (width >= 1250) {
        
        // Remove the resizing stylesheet if the screen is at least 1250px in width, which is the minimum requirement to look nice in a browser.
        $('div#containerMin').attr('id', 'container'); // Switch back to the container with side content div.
        $('#size-stylesheet').attr('href', ''); // Remove the stylesheet with smaller window styles
        $('div#mainContentNoSidebar').attr('id', 'mainContent')
        $('div#sideContent').removeClass('hidden');
        $('div#editSideContent').removeClass('hidden'); // This is the edit box from the 'add route' screen.
        // div#editSideContent displays which route is being edited.
    }
}

// Filter the table based on location, day, or time. The filter is supplied
// by the user via the input field with ID 'searchFilter'.
// The filter is applied whenever the user types anything into the box
// and the filter is also case insensitive.
// The filter is applied to each row inside of the table body.
function filterTable() {
    var $rows = $('#minimalistTable tbody tr');
    $('#searchFilter').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
        $thead = $('#table thead');
        $thead.show();
        $rows.show().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
    });
}